<template>
    <div class="detailContainer" :style="'min-height: '+docheight+'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="bannerCont">
            <img :src="detailInfo.package_cover" />
        </div>
        <div class="mainCont">
            <div class="typeCont">
                <div class="typeItem">
                    <div class="typeItemName">{{ detailInfo.package_name }}</div>
                    <div class="typeItemPrice">{{ detailInfo.package_price }}元/{{ detailInfo.package_time }}分钟</div>
                </div>
            </div>
            <div class="bzCont">
                <div class="bzItem">
                    <span class="iconfont icon-shiming"></span>
                    <span>实名认证</span>
                </div>
                <div class="bzItem">
                    <span class="iconfont icon-peifu"></span>
                    <span>爽约包赔</span>
                </div>
                <div class="bzItem">
                    <span class="iconfont icon-tuihuobaozhang"></span>
                    <span>未服务随时退</span>
                </div>
            </div>
            <div class="carCont">
                <div class="carTitle">
                    <div>服务时间</div>
                    <div class="carTitleRight">最近可约<span class="serveTime">{{ learnTime }}</span></div>
                </div>
            </div>
            <div class="carCont">
                <div class="carTitle">
                    <div>服务介绍</div>
                </div>
                <div class="carMain">
                    <p>{{ detailInfo.package_introduce }}</p>
                    <div class="mainItem">
                        <div class="mainItemName">服务内容</div>
                        <ul>
                            <li :key="index" v-for="(item,index) in detailInfo.package_service_content">{{ item.name }}</li>
                        </ul>
                    </div>
                    <div class="mainItem">
                        <div class="mainItemName">下单须知</div>
                        <ul>
                            <li>所有按摩服务的预约需通过平台进行线上预约。</li>
                            <li>付款应通过平台提供的安全支付系统完成，禁止线下现金或其他方式交易。</li>
                            <li>严禁提供、传播或参与任何涉黄、淫秽、色情等违法行为。</li>
                            <li>服务开始后，因客户原因提前终止服务的，服务费不予退还。</li>
                            <li>按摩服务仅限于合法、正规、健康的按摩项目。</li>
                            <li>客户因看见保洁员不够漂亮等与专业无关系列因素而要求退单者，该客户所付项目费退一半，交通费不予退还。</li>
                        </ul>
                    </div>
                    <div class="mainItem">
                        <div class="mainItemName">取消订单须知</div>
                        <ul>
                            <li>保洁员60分钟未接单或接单后距离订单服务预约时间前1小时可全额退款。</li>
                            <li>距离服务时间1小时内取消订单，扣除25%项目费（保洁员误工费）。</li>
                            <li>距离服务时间半小时内取消订单，退50%项目费，不退车费（保洁员误工费+交通费+平台服务费）</li>
                            <li>预约服务时间超过20分钟之后或已经核销订单，不予退款</li>
                        </ul>
                    </div>
                    <div class="mainItem">
                        <div class="mainItemName">平台赔付规则</div>
                        <ul>
                            <li>保洁员接单之后，若保洁员爽约未至，全额退款且平台赔付30元给用户。</li>
                        </ul>
                    </div>
                    <div class="mainItem">
                        <div class="mainItemName">预约服务流程</div>
                        <ul>
                            <li>选择心仪保洁员</li>
                            <li>填写信息下单支付</li>
                            <li>等待保洁员接单</li>
                            <li>临近预约时间前保洁员联系客户</li>
                            <li>核销订单并开始服务</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- <div class="detailImg">
                <img :src="detailInfo.package_details_img" />
            </div> -->
            <div class="replyCont">
                <div class="replyTop">
                    <div>用户点评({{ total }}+)</div>
                </div>
                <div class="replyList">
                    <div class="replyItem" :key="index" v-for="(item,index) in replayArr">
                    <div class="replyUserCont">
                        <div class="userImg">
                            <img :src="item.head_img+ossSrc">
                        </div>
                        <div class="userInfo">
                        <div class="userName">
                            <!-- <div class="userNameVal">{{ item.nick_name }}</div> -->
                            <div class="userNameVal">****</div>
                            <div class="replyTime">{{ item.create_time }}</div>
                        </div>
                        <div class="replyRate">
                            <van-rate color="#916ce0" size="16px" v-model="item.star_rating" readonly allow-half />
                            <div class="delEvalText" @click="delEval(item,index)" v-if="item.is_user==1">删除</div>
                        </div>
                        </div>
                    </div>
                    <div class="replyInfoCont">
                        <div class="replayMain">
                            <div class="replyText">{{ item.evaluate_content }}</div>
                            <div class="replyImg">
                                <div :class="index2%3==0?'replyImgItem noleft':'replyImgItem'" :key="index2" v-for="(item2,index2) in item.evaluate_img">
                                <img :src="item2+ossSrc" @click="showImg(item.evaluate_img,index2)">
                                </div>
                            </div>
                            <div class="replayTech"><span class="iconfont icon-jishi"></span> {{ item.technician_nick_name }}</div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="loadMore" v-if="replayArr.length>0">{{ loadMoreText }}</div>
                <div class="loadMore" v-if="replayArr.length==0">还没有评论～</div>
            </div>
        </div>
        <div class="ctrlCont">
            <div class="leftBtn">
                <div class="goBack">
                    <div @click="backFn" class="iconfont icon-fanhui"></div>
                    <div>首页</div>
                </div>
                <div class="userTel">
                    <div @click="contactFn" class="iconfont icon-kefu2"></div>
                    <div>客服</div>
                </div>
            </div>
            <div class="rightBtn" @click="showTechFn">选择保洁员</div>
        </div>
      </div>
      <van-popup
        v-model:show="goodsMask"
        round
        position="bottom"
        >
        <div class="goodsMaskCont">
            <div class="maskTitle">点击选择保洁员</div>
            <div class="noTech" v-if="techArr.length==0">该套餐暂无保洁员，请换个套餐试试～</div>
            <div class="techArr" ref="techList" v-show="techArr.length>0">
            <div :class="checkId==item.technician_id?'activeTech orderItem':'orderItem'" @click="checkTech(item,index)" :key="index" v-for="(item,index) in techArr">
                <div class="goodsList">
                <div class="goodsItem">
                    <div class="goodsImg">
                        <img :src="item.technician_head_img+ossSrc">
                    </div>
                    <div class="goodsInfo">
                    <div class="goodsName">
                        <div class="newTag" v-if="item.is_new==1">新人</div>
                        <div>{{ item.technician_nick_name }}</div>
                    </div>
                    <div class="orderTime">
                        <div class="newTag" v-if="item.service_status==1">可服务</div>
                        <div class="serveing" v-if="item.service_status==2">服务中</div>
                        <div class="blackTag" v-if="item.service_status==3">休息中</div>
                        <div class="serveTime" v-if="item.service_status==1&&item.rest_time">休息时间：{{ item.rest_time}}</div>
                    </div>
                    <div class="orderTime">
                        <div class="orderIconItem">
                            <div class="iconfont icon-w_aixin"></div>
                            <div>{{ item.collect_num }}</div>
                        </div>
                        <div class="orderIconItem">
                            <div class="iconfont icon-shoucang2"></div>
                            <div>{{ item.rate }}</div>
                        </div>
                        <div class="orderNum">已服务:{{ item.order_num }}单</div>
                    </div>
                    </div>
                </div>
                </div>
                <div class="disCont" v-if="item.service_status==3"></div>
            </div>
            </div>
            <div class="maskBtn">
                <div :class="checkId!=-1?'canBuy':'buyGoods'" @click="buyFn"><span class="iconfont icon-shandian"></span>{{ checkId!=-1?'立即预约':'选择保洁员才能下单'}} </div>
            </div>
        </div>
        </van-popup>
        <van-image-preview :startPosition="startPosition" v-model:show="showVantImg" :images="priveImg"></van-image-preview>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
  import { Swiper,SwiperItem } from 'vux'
  import getLoad from '@/components/public/getLoad'
  import {details,checkTechnician,evaluate} from "@/http/api";

    import getTimeOut from '@/components/public/getTimeOut'
    export default {
      components: {getLoad,getTimeOut,Swiper,SwiperItem},
      data() {
        return {
          showTimeOut:false,
          showCont:false,
          total:0,
          loadMoreText:'',
          
          goodsMask:false,
          learnTime:'',
          techArr:[],
          tech_per_page:5,
          tech_total:0,
          tech_getting:false,
          tech_page:1,
          checkId:-1,
          priveImg:[],
          showVantImg:false,
          startPosition:0,
          detailInfo:{},
          replayArr:[],
            per_page:5,
            page:1,
            last_page:0,
            total:0,
            getting:false,
        }
      },
      props: {},
      methods:{
        backFn(){
            this.$router.back()
        },
        contactFn(){
            window.location.href = 'tel:18483613963'
        },
        buyFn(){
            if(this.checkId!=-1){
                this.$router.push({path:'/orderWait',query:{package_id:this.$route.query.id,technician_id:this.checkId}})
            }
        },
        showTechFn(){
            this.goodsMask = true
            setTimeout(() => {
                this.$refs.techList.addEventListener('scroll',this.nextTechfn)
            }, 100);
        },
        showImg(arr,index) {
            if(arr.length>0){
                this.startPosition = index
                this.priveImg = arr
                this.showVantImg = true
            }
        },
        checkTech(item){
            if(item.service_status!=3){
                this.checkId  = item.technician_id
            }
        },
        getHalfHourlyTimePoints() {
            let currentTime = new Date();
            // 设置当天22:00的时间
            const endOfDay = new Date(currentTime);
            endOfDay.setHours(24, 0, 0, 0);

            // 存储结果的数组
            const roundedHalfHourlyTimePoints = [];

            // 循环生成时间点，每隔30分钟
            while (currentTime <= endOfDay) {
                // 获取分钟数并确保为30的倍数
                const minutes = Math.floor(currentTime.getMinutes() / 30) * 30;

                // 格式化小时和分钟，保证单个数字的小时和分钟前面加0
                const formattedHour = currentTime.getHours().toString().padStart(2, '0');
                const formattedMinute = minutes.toString().padStart(2, '0');

                // 将时间点加入数组
                roundedHalfHourlyTimePoints.push(`${formattedHour}:${formattedMinute}`);

                // 增加30分钟
                currentTime.setMinutes(currentTime.getMinutes() + 30);
            }
            roundedHalfHourlyTimePoints.splice(0,2)            
            if(roundedHalfHourlyTimePoints.length > 0) {
                this.learnTime = '今天 '+roundedHalfHourlyTimePoints[0]
            }else{
                this.learnTime = '明天 00:00'
            }
            const sevenPM = new Date(currentTime);
            sevenPM.setHours(23, 0, 0, 0);
            let nowTime= new Date()
            let result = nowTime >= sevenPM;
            if(result){
                this.learnTime = '明天 00:00'
            }
        },
        getData(){
            let data ={
                package_id:this.$route.query.id,
            }
            details(data).then((res)=>{
                if(res.data.code==1){
                    this.detailInfo = res.data.data
                }else{
                    this.showToast = true
                    this.showText = res.data.msg
                }
                this.showCont = true
            }).catch(()=>{
                this.showCont = true
                this.showTimeOut = true
            })
        },
        getTech(){
        let data ={
            package_id:this.$route.query.id,
            per_page:this.tech_per_page,
            page:this.tech_page,
        }
        checkTechnician(data).then((res)=>{
          if(res.data.code==1){
            let arr = res.data.data.data
            for(let i=0;i<arr.length;i++){
              arr[i]['rate'] =  (Number(arr[i].technician_score)/20).toFixed(1)<4.8?4.8:(Number(arr[i].technician_score)/20).toFixed(1)
              this.techArr.push(arr[i])
            }
            setTimeout(() => {
              this.tech_getting = false
            }, 100);
            this.tech_last_page = res.data.data.last_page
          }else{
            this.showToast = true
            this.showText =res.data.msg
          }
        }).catch(()=>{
            this.showToast = true
            this.showText = '网络超时'
        })
      },
      nextTechfn(){

            if(this.$route.path == '/detail'){
                let h = this.$refs.techList.scrollHeight
                let wh = this.$refs.techList.clientHeight
                let top = this.$refs.techList.scrollTop
                let bottom = h-wh-top
                console.log(bottom)
                if(bottom<=50){
                    console.log(333)
                if(this.tech_getting==false){
                    console.log(444)
                    if(this.tech_last_page>this.tech_page){
                        this.tech_getting=  true
                        this.tech_page++
                        console.log(222)
                        this.getTech()
                    }
                }
                }
            }
        },
        getEval(){
            let data = {
                package_id:this.$route.query.id,
                per_page:this.per_page,
                page:this.page,
            }
            evaluate(data).then((res)=>{
                if(res.data.code==1){
                if(res.data.data.data.length>0){
                    let arr = res.data.data.data
                    for(var i=0;i<arr.length;i++){
                        this.replayArr.push(arr[i])
                    }
                    setTimeout(() => {
                        this.getting = false
                    }, 100);
                    this.last_page = res.data.data.last_page
                    this.total =  res.data.data.total
                    if(this.page==this.last_page){
                        this.loadMoreText = '到底啦～'
                    }else{
                        this.loadMoreText = '评论加载中~'
                    }
                }else{
                    this.last_page = 0
                    this.total = 0
                }
                }else{
                this.showToast = true
                this.showText = res.data.msg
                }
            }).catch(()=>{
                this.showToast = true
                this.showText = res.data.msg
            })
        },
        nextfn(){
            if(this.$route.path=='/detail'){
                let h = document.documentElement.scrollHeight||document.body.scrollHeight
                let wh = document.documentElement.clientHeight||document.body.clientHeight
                let top = document.documentElement.scrollTop||document.body.scrollTop
                let bottom = h-wh-top
                if(bottom<=50){
                if(this.getting==false){
                    if(this.last_page>this.page){
                    this.getting=  true
                    this.page++
                    this.getEval()
                    }
                }
                }
            }
            },
      },
      mounted(){
        window.addEventListener('scroll',this.nextfn)
      },
      created() {
        this.getHalfHourlyTimePoints()
        this.getData()
        this.getTech()
        this.getEval()
      },
    }
  </script>
  
  <style scoped lang="less">
  .detailContainer{
    background-color: #fff;
    padding-bottom: 3.75rem;
    box-sizing: border-box;
    .bannerCont {
      width: 100%;
      font-size: 0;
      img {
        width: 100%;
      }
    }
    .mainCont{
        box-sizing: border-box;
        background-color: #f7f7f7;
        .typeCont{
            background-color: #fff;
            width: 100%;
            padding: 0.5rem 4%;
            box-sizing: border-box;
            font-size: 0.6rem;
            box-sizing: border-box;
            // justify-content: space-between;
            overflow-x: auto;
            white-space: nowrap;
            // flex-wrap: wrap;
            .typeItem{
                display: inline-block;
                white-space: nowrap;
                border-radius: 0.25rem;
                padding:0.35rem 0.7rem;
                box-sizing: border-box;
                position: relative;
                margin-right: 4%;
                border:1px solid #916ce0;
                color: #916ce0;
                text-align: center;
                .typeItemName{
                    font-weight: bold;
                    font-size: 0.7rem;
                }
                .typeItemPrice{
                    margin-top: 0.25rem;
                }
            }
        }
        .bzCont{
            display: flex;
            background-color: #fff;
            width: 100%;
            padding: 0.5rem 4%;
            box-sizing: border-box;
            font-size: 0.6rem;
            .bzItem{
                margin-right: 0.75rem;
                color: #666;
                display: flex;
                align-items: center;
                .iconfont{
                    color: #916ce0;
                    font-size: 0.8rem;
                    margin-right: 0.25rem;
                }
            }
        }
        .carCont{
            margin-top: 0.75rem;
            background-color: #fff;
            width: 100%;
            padding: 0.75rem 4%;
            box-sizing: border-box;
            .carTitle{
                color: #666;
                font-size: 0.7rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .carTitleRight{
                    .serveTime{
                        color: #916ce0;
                        margin-left: 0.5rem;
                    }
                    .iconfont{
                        font-size: 0.6rem;
                    }
                }
            }
            .serveTag{
                width: 100%;
                margin-top: 0.75rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .tagItem{
                    width: 48%;
                    background-color: #ebebeb;
                    margin-bottom: 0.5rem;
                    text-align: center;
                    padding: 0.5rem 0;
                    border-radius: 0.15rem;
                    font-size: 0.6rem;
                }
            }
            .carMain{
                margin-top: 0.75rem;
                .mainItem{
                    margin-top: 0.75rem;
                    .mainItemName{
                        font-size: 0.7rem;
                        font-weight: bold;
                        margin-bottom: 0.25rem;
                    }
                    ul{
                        list-style: outside;
                        padding-left: 1.5rem;
                        box-sizing: border-box;
                    }
                }
            }
        }
        .tipCont{
            background-color: #edf2fd;
            width: 100%;
            padding: 0.75rem 4%;
            box-sizing: border-box;
            .tipTitle{
                color: #916ce0;
                display: flex;
                justify-content: space-between;
                font-size: 0.7rem;
            }
            ul{
                margin-top: 0.75rem;
                list-style: outside;
                padding-left: 1.5rem;
                box-sizing: border-box;
                color: #916ce0;
            }
        }
        .replyCont{
            background-color: #fff;
            width: 100%;
            padding: 0.75rem 4%;
            margin-top: 0.75rem;
            box-sizing: border-box;
            .replyTop{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.75rem 0;
                font-size: 0.7rem;
                font-weight: bold;
                // border-bottom: 1px solid #ebebeb;
                color: #333;
            }
            .replyList{
                width: 100%;
                .replyItem{
                width: 100%;
                padding-bottom:0.25rem;
                margin-bottom: 0.5rem;
                // border-bottom: 1px solid #ebebeb;
                .replyUserCont{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .userImg{
                    width: 2.25rem;
                    height: 2.25rem;
                    border-radius: 1.5rem;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                    }
                    .userInfo{
                    flex: 1;
                    width: 0.5rem;
                    margin: 0 0 0 0.75rem;
                    .userName{
                        display: flex;
                        width: 100%;
                        align-items:center;
                        justify-content: space-between;
                        .userNameVal{
                        font-size: 0.75rem;
                        white-space: nowrap;
                        overflow: hidden;
                        width: 1rem;
                        flex: 1;
                        margin-right: 0.75rem;
                        text-overflow: ellipsis;
                        }
                        .replyTime{
                        font-size: 0.6rem;
                        color: #999;
                        }
                    }
                    .replyRate{
                        margin-top: 0.15rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .delEvalText{
                        color: #999;
                        font-size: 0.6rem;
                        text-decoration: underline;
                        }
                    }
                    }
                }
                .replyInfoCont{
                    width: 100%;
                    margin-top: 0.5rem;
                    padding-left: 3rem;
                    box-sizing: border-box;
                    .replayMain{
                    background-color: #f2f2f2;
                    padding: 0.5rem;
                    box-sizing: border-box;
                    border-radius: 0.25rem;
                    .replyImg{
                        width: 100%;
                        display: flex;
                        margin-top: 0.75rem;
                        flex-wrap: wrap;
                        .replyImgItem{
                        margin-bottom: 0.25rem;
                        margin-left: 2%;
                        height: 4rem;
                        img{
                            height: 100%;
                            border-radius: 0.25rem;
                        }
                        }
                        .noleft{
                        margin-left: 0;
                        }
                    }
                    .replayTech{
                        text-align: right;
                        margin-top: 0.25rem;
                        color: #666;
                        font-size: 0.6rem;
                        color: #916ce0;
                    }
                    }
                }
                }
            }
            .loadMore{
                // padding-bottom: 1.5rem;
                text-align: center;
                font-size: 0.6rem;
                color: #999;
            }
        }
        .detailImg{
            background-color: #fff;
            font-size: 0;
            img{
                width: 100%;
            }
        }
    }
    .ctrlCont{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 4%;
        box-sizing: border-box;
        align-items: center;
        .leftBtn{
            display: flex;
            align-items: center;
            .goBack,.userTel{
                padding: 0 0.75rem;
                text-align: center;
                font-size: 0.6rem;
                margin-right: 0.75rem;
                .iconfont{
                    font-size: 1.2rem;
                }
            }
            .userTel{
                .iconfont{
                    font-size: 1.1rem;
                }
            }
        }
        .rightBtn{
            font-size: 0.7rem;
            background-color: #916ce0;
            color: white;
            padding: 0.5rem 2.5rem;
            border-radius: 1rem;
            letter-spacing: 0.2rem;
        }
    }
    .goodsMaskCont{
        width: 100%;
        padding: 1rem 4%;
        box-sizing: border-box;
        background-color: #f7f7f7;
        .maskTitle{
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            text-align: center;
        }
        .noTech{
            color: #666;
            text-align: center;
            margin-bottom: 1rem;
        }
        .techArr{
            width: 100%;
            max-height: 15rem;
            box-sizing: border-box;
            overflow-y: auto;
            .orderItem{
                width: 100%;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 0.25rem;
                padding:0.75rem 1rem;
                margin-bottom: 0.75rem;
                box-sizing: border-box;
                position: relative;
                .disCont{
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: rgba(255, 255, 255, 0.5);
                    width: 100%;
                    height: 100%;
                }
                
                .goodsList{
                width: 100%;
                .goodsItem{
                    width: 100%;
                    margin-bottom: 0.5rem;
                    display: flex;
                    align-items: center;
                    .goodsImg{
                    width: 3.5rem;
                    height: 3.5rem;
                    overflow: hidden;
                    border-radius: 0.25rem;
                    margin-right: 0.5rem;
                    img{
                        width: 100%;
                    }
                    }
                    .goodsInfo{
                    width: 0.5rem;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    height: 3.5rem;
                    justify-content: space-between;
                    .goodsName{
                        width: 100%;
                        font-size: 0.7rem;
                        display: flex;
                        .newTag{
                            background-color: #916ce0;
                            color: white;
                            font-size: 0.6rem;
                            padding: 0.05rem 0.5rem;
                            border-radius: 0.1rem;
                            margin-right:0.5rem;
                        }
                    }
                    .orderTime{
                        font-size: 0.6rem;
                        color: #666;
                        display: flex;
                        align-items: center;
                        .serveTime{
                            color: #666;
                            font-size: 0.6rem;
                        }
                        .newTag,.blackTag,.serveing{
                            // background-color: #916ce0;
                            border: 1px solid #916ce0;
                            color: #916ce0;
                            font-size: 0.6rem;
                            padding: 0.05rem 0.5rem;
                            border-radius: 0.1rem;
                            margin-right: 
                            0.5rem;
                        }
                        .blackTag{
                        // background-color: #ebebeb;
                        color: #666;
                        border: 1px solid #666;
                        }
                        .serveing{
                        color: #45bb4f;
                        border: 1px solid #45bb4f;
                        }
                        .orderIconItem{
                            display: flex;
                            align-items: center;
                            margin-right: 0.5rem;
                        }
                        .iconfont{
                            color: #916ce0;
                            margin-right: 0.25rem;
                        }
                        .orderNum{
                            margin-left: 0.75em;
                        }
                    }
                    .goodsType{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        
                        .goodsTypeItem{
                        padding:0.1rem 0.5rem;
                        background-color: #F6F6F6;
                        font-size: 0.6rem;
                        height: 1rem;
                        line-height: 1rem;
                        border-radius: 0.15rem;
                        color: #999;
                        }
                        .shopInfo{
                            // flex: 1;
                            display: flex;
                            align-items: center;
                            .shopInfoItem{
                                display: flex;
                                margin-right: 0.75rem;
                                color: #666;
                                align-items: center;
                                .iconfont{
                                    margin-right: 0.25rem;
                                    font-size: 0.8rem;
                                }
                            }
                        }
                    }
                    }
                }
                }
            }
            .activeTech{
                background-color: #f8e5ff;
                border: 1px solid #916ce0;
            }
        }
        .maskBtn{
            // margin: 1.25rem 0 0.75rem;
            margin-top: 0.75rem;
            width: 100%;
            border-radius: 0.25rem;
            overflow: hidden;
            display: flex;
            .buyGoods,.canBuy{
                width: 100%;
                font-size: 0.7rem;
                text-align: center;
                background-color: #916ce0;
                color: white;
                padding: 0.75rem 0;
            }
            .buyGoods{
                opacity: 0.5;
            }
        }
    }
  }
  </style>
  